<%@ include file="/common/taglibs.jsp"%>
<head>
    <title>Orden de items de menu</title>
    <meta name="heading" content="Orden de items de menu"/>
</head>
	<script type="text/javascript" src="<c:url value='/scripts/jquery-latest.js'/>"></script>
	<script type="text/javascript">
		jQuery.noConflict();
	</script>
  <script>
  jQuery(document).ready(function(){
    jQuery("#myList").sortable({});
  });
  function validar() {
  	var cadena = "";
  	jQuery("#myList li").each(function(){
  		if (cadena != "") cadena += ",";
  		cadena = cadena + this.id;
  	});
  	jQuery("#ordenForm_nuevoOrden").val(cadena);
  }
  </script>
  	<style>.lista { list-style: none; }
		.itemlista { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }
	</style>
</head>
<body>

<script type="text/javascript" src="<c:url value='/scripts/jquery-ui-personalized-1.6rc1.min.js'/>"></script>
<ul id="myList" class="lista">
<s:iterator status="status" value="menuItemsOrdenados" >
<li class="itemlista" id="<s:property value="key"/>"><s:property value="value"/></li>
</s:iterator>
</ul>

<s:form id="ordenForm" action="saveOrderMenu" method="post" validate="true" >
	<s:hidden key="id" />
	<s:hidden key="nuevoOrden" />

    <li class="buttonBar bottom">         
        <s:submit cssClass="button" method="saveOrder" key="button.save" theme="simple" onclick="return validar();"/>
        <s:submit cssClass="button" method="cancel" key="button.cancel" theme="simple"/>
    </li>
</s:form>
